import React, { useState } from 'react';
import {Link, useNavigate} from "react-router-dom";
import './LoginPage.css';
import Group from '../../img/Group 109.svg';

const LoginPage = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [usernameError, setUsernameError] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [loginError, setLoginError] = useState('');
    const [requestError, setRequestError] = useState('');
    const navigate = useNavigate();

    const handleLogin = async (event) => {
        event.preventDefault();

        setUsernameError('');
        setPasswordError('');
        setLoginError('');
        setRequestError('');

        if (!username) {
            setUsernameError('Пожалуйста, введите логин.');
            return;
        }

        if (!password) {
            setPasswordError('Пожалуйста, введите пароль.');
            return;
        }

        const fpPromise = import('https://openfpcdn.io/fingerprintjs/v4')
            .then(FingerprintJS => FingerprintJS.load());

        fpPromise
            .then(fp => fp.get())
            .then(async result => {
                const fingerprint = result.visitorId;
                const user = {
                    login: username,
                    password: password,
                    fingerprint: fingerprint
                };

                try {
                    const response = await fetch('http://localhost:3000/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(user)
                    });

                    if (response.ok) {
                        const data = await response.json();
                        sessionStorage.setItem('access_token', data.access_token);
                        sessionStorage.setItem('role', data.role);
                        if (data.role) {
                            navigate('/admin');
                        } else {
                            navigate('/student-materials');
                        }
                    } else {
                        const responseData = await response.json();
                        if (response.status === 401) {
                            setLoginError('Неправильное имя пользователя или пароль.' || responseData.error);
                        } else if (response.status === 404) {
                            setLoginError('Пользователь с такими данными не найден.' || responseData.error);
                        } else {
                            setRequestError('Произошла ошибка при обработке запроса.');
                        }

                    }
                } catch (error) {
                    setRequestError('Ошибка при отправке запроса');
                }

            });
    };

    return (
        <div className="login-page">
            <div className="div-photo">
                <h1>HUNTER4BAG</h1> <br/>
                <h4>Открой мир тестирования!</h4> <br/>
                <h3>Тестирование - это процесс проверки программного продукта на соответствие заданным требованиям и выявление ошибок или дефектов</h3>
                <img className="photo" src={Group} alt="HUNTER4BAG"/>
            </div>
                <>
                    <div className="login-form">
                        <div className="container">
                            <h2>Вход</h2>
                            <p>Введите логин и пароль, чтобы войти</p>
                            {requestError && <p className="error-message">{requestError}</p>}
                            {loginError && <p className="error-message">{loginError}</p>}
                            {usernameError && <p className="error-message">{usernameError}</p>}
                            {passwordError && <p className="error-message">{passwordError}</p>}
                            <form onSubmit={handleLogin}>
                                <div className="inputGroup">
                                    <input
                                        type="text"
                                        id="username"
                                        placeholder="Логин"
                                        value={username}
                                        onChange={(e) => setUsername(e.target.value)}
                                        className="input"

                                    />

                                </div>
                                <div className="inputGroup">
                                    <input
                                        type="password"
                                        id="password"
                                        placeholder="Пароль"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                        className="input"
                                    />

                                </div>
                                <button type="submit" className="button">Войти</button>
                                <div className="rememberForgotGroup">
                                    <Link to="/recovery-form" className="forgotPasswordLink">
                                        Забыли пароль?
                                    </Link>
                                </div>
                            </form>
                        </div>
                    </div>
                </>
        </div>
    );
}

export default LoginPage;
